<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>定位</title>
    <style>
        *{
            margin: 0;
            padding:0 ;
        }
        .space{
            width: 140px;
            min-height: 1000px;
            background-color: #3385ff;
            margin: 40px 0px;
        }
        body{
           overflow-y:auto;/*垂直方向的滚动条  // hidden超出会隐藏滚动条 //auto没溢出不会出现滚动条，出现了会自动隐藏滚动条*/
           /* overflow: scroll;!*不管超不超出都会出现滚动条*!*/

        }
        .menu_top{
            width: 100%;
            text-align: center;
            background-color: red;
            color: white;
            position: fixed;/*将菜单固定在上面，不会随滚动条消失*/
            left: 0 ;
            top: 0;
            display: none;/*将这个先隐藏*/
        }
        .menu_right{
            background-color: black;
            color: white;
            width: 100px;
            height: 100%;
            text-align: center;
            position: fixed;
            right: 0;
            top: 0;
            display: none;

        }
        .menu_botton{
            width: 100%;
            background-color: #ddbbbb;
            color: #dd3465;
            text-align: center;
            position: fixed;
            bottom: 0;
            left: 0;
            display: none;
        }
        .menu_left{
            width: 50px;
            height: 100%;
            background-color: #ddbbbb;
            color: #fffbf9;
            text-align: center;
            position: fixed;
            bottom: 0;
            left: 0;
        }
        .parent{
            width: 600px;
            height: 500px;
            border: 1px solid black;
            margin: 109px auto;
            font-size: 0px;/*不要空白*/
            overflow: auto;
            position: relative;/*父标签*/

        }
        .parent .child{
            position: absolute;/*子标签的absolutiao中，父标签一定要有relative相对定位*/
            /*position: relative;!*相对位置*!*/
            /*top: 100px;
            right: 0px;*/

            font-size: 16px;/**/
            display: inline-block;/*在同一行显示*/
            background-color: #00d7c6;
            right: 110px;
            bottom: 0px;

        }
        .parent .child:last-child{/*伪类选择器*/

            background-color: #ddbbbb;
           /* top: 5px;
            left: 10px;*/


        }
        .space{

        }


        .m-text {
            width: 200px;
            border: 1px solid red;

            margin: 20px auto;
            white-space: nowrap;/*强制不换行*/
            overflow: hidden;/*超出部分隐藏*/
            text-overflow: ellipsis;/*文本域异常出现省略号...*/

        }
        .menu{
            width: 553px;
            height: 55px;
            border: 1px  solid red;
            margin: 40px auto;
            /*均匀分布*/
            display: flex;
            flex-direction:row ;
            flex-wrap: nowrap;/*不要换行*/
            justify-content: space-around;/*??????*/

        }
        .menu .item{
            line-height: 50px;/*字体居中对齐*/
            display: inline-block;
            background-color: #999999;
           flex-grow: 1;/*平均分部*/
        }

    </style>
</head>
<body>
    <!--<div class="menu_top">
    <span>菜单</span>
    </div>

    <div class="menu_right">
        <span>菜单</span>
    </div>

    <div class="menu_botton">
        <span>菜单</span>
    </div>

    <div class="menu_left">
        <span>菜单</span>
    </div>

    <div class="space">
    </div>
-->
<!--<div class="parent">
    <div class="child">
    你好
    </div>
    <div class="space"></div>-->

<!--
    <div class="child">
        他好
    </div>
-->

    <!--<div class="m-text">
        <span>30天包退（仅限美妆商品）美妆商
            品支持30天无理由包退，包括开封使用后
            （高单价的奢侈品除外，注意页面说明）
            。品牌维修（仅限手表商品）：支持品牌
            维修服务，聚名品购买的手表在中国境内
            享受对应品牌全球联保点的保养服务。</span>
    </div>-->


    <!--弹性布局-->
    <div class="menu">
        <div class="item">首页</div>
        <div class="item">分类</div>
        <div class="item">发现</div>
        <div class="item">活动</div>
        <div class="item">我的</div>


    </div>
</div>





</body>
</html>